import React, { useEffect,useState } from 'react';
import { AppstoreOutlined ,StarOutlined,FileOutlined,PlusOutlined  ,EditOutlined,SettingOutlined,InfoCircleOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import {Outlet,useNavigate,useLocation} from 'react-router-dom'
import Navs from '../utils/nav'
import 'antd/dist/antd.css'
import './index.css'
const { Header, Content, Sider } = Layout;

const items1 = ['1', '2', '3'].map((key) => ({
    key,
    label: `nav ${key}`,
  }));
let items2 = [
        { label: '首页', key: '/manage', icon: <AppstoreOutlined /> },
        {
            label: '数据管理', key: 'shoplist-item', icon: <FileOutlined />, children: [
                { key: '/userlist', label: '用户列表' },
                { key: '/shoplist', label: '商家列表' },
                { key: '/foodList', label: '食品列表' },
                { key: '/orderList', label: '订单列表' },
                { key: '/adminList', label: '管理员列表' },
            ]
        },
        {
            label: '添加数据', icon: <PlusOutlined />, children: [
                { key: 'addShop', label: '添加商铺' },
                { key: 'addGoods', label: '添加商铺' },
            ], key: 'item-2'
        },
        {
            label: '图表', icon: <StarOutlined />, children: [
                { key: 'visitor', label: '用户分布' },
            ], key: 'item-3'
        },
        {
            label: '编辑', icon: <EditOutlined />, children: [
                { key: 'vueEdit', label: '文本编辑' },
            ], key: 'item-4'
        },
        {
            label: '设置', icon: <SettingOutlined />, children: [
                { key: 'adminSet', label: '管理员设置' },
            ], key: 'item-5'
        },
        {
            label: '说明', icon: <InfoCircleOutlined />, children: [
                { key: 'explain', label: '说明' },
            ], key: 'item-6'
        },
    ]
   
const App = () => {
 let [nav,setNav] = useState([])
 let location = useLocation();
 let navigate = useNavigate();
  function  clk(val){
    navigate(val.key) 
  }
   useEffect(() => {
    Navs.forEach(i=>{
      // console.log(i);
      if(i.pathname==location.pathname){
        nav=i.title
        setNav(nav)
      }
    })
   });
  return <Layout>
   
    <Layout>
      <Sider width={200} className="site-layout-background" >
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          style={{
            height: '100%',
            borderRight: 0,
          }}
          items={items2}
          onClick={clk}
        />
        
      </Sider>
      <Layout
        style={{
          padding: '0 24px 24px',
        }}>
        <a-breadcrumb-separator
          style={{
            margin: '16px 0',
          }}
        >
             {nav.map((i, index) => {
                    return <Breadcrumb.Item key={index}>{i}</Breadcrumb.Item>
                })}
          {/* <Breadcrumb.Item>首页</Breadcrumb.Item>
          <span className='aa' ref={ref}>111</span> */}
          <div className='img'>
            <img src='https://img1.baidu.com/it/u=4178413403,3825358390&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' />
          </div>
        </a-breadcrumb-separator>
        
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  </Layout>
}
export default App;
